<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sub.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<!-- 头部 offCanvasSide-->
		<header class="mui-bar mui-bar-nav detail">
	       <a class="mui-action-back mui-pull-left icon-left"></a>
	       <h1 class="detail-tit mui-ellipsis mui-pull-left">我的话题</h1>
	       <a href="" class="mui-pull-right icon-serve" style="font-size: .64rem;"></a>
	   </header>
		<div class="mui-content">
			<!--S我的话题-->
			<div class="topic-wrap my-topic mt30" id="topic">
				<div class="topic">
					<div class="topic-body">
						<div class="mui-clearfix">
							<h1 class="mod-title-30 mui-ellipsis mui-pull-left">话题话题话题话题话题话题话题话题</h1>
							<a href="" class="mui-pull-right icon-update"></a>
						</div>
						<p class="mod-info-22">话题标题标题标题标题标题标题。标题标题标题题标题，题标题题标 题题标题题标题题标题题标题题标题题标题。题标题题标题题标题题 标</p>
						<div class="topic-body-imgs">
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
						</div>
					</div>
					<div class="topic-footer">
						<ul class="mod-title-20 mui-pull-right">
							<li><i class="icon-like"></i>202</li>
							<li><i class="icon-collect"></i>202</li>
							<li><i class="icon-comment"></i>202</li>
						</ul>
					</div>
				</div>
				<div class="topic">
					<div class="topic-body">
						<div class="mui-clearfix">
							<h1 class="mod-title-30 mui-ellipsis mui-pull-left">话题话题话题话题话题话题话题话题</h1>
							<a href="" class="mui-pull-right icon-update"></a>
						</div>
						<p class="mod-info-22">话题标题标题标题标题标题标题。标题标题标题题标题，题标题题标 题题标题题标题题标题题标题题标题题标题。题标题题标题题标题题 标</p>
						<div class="topic-body-imgs">
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
						</div>
					</div>
					<div class="topic-footer">
						<ul class="mod-title-20 mui-pull-right">
							<li><i class="icon-like"></i>202</li>
							<li><i class="icon-collect"></i>202</li>
							<li><i class="icon-comment"></i>202</li>
						</ul>
					</div>
				</div>
				<div class="topic">
					<div class="topic-body">
						<div class="mui-clearfix">
							<h1 class="mod-title-30 mui-ellipsis mui-pull-left">话题话题话题话题话题话题话题话题</h1>
							<a href="" class="mui-pull-right icon-update"></a>
						</div>
						<p class="mod-info-22">话题标题标题标题标题标题标题。标题标题标题题标题，题标题题标 题题标题题标题题标题题标题题标题题标题。题标题题标题题标题题 标</p>
						<div class="topic-body-imgs">
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
						</div>
					</div>
					<div class="topic-footer">
						<ul class="mod-title-20 mui-pull-right">
							<li><i class="icon-like"></i>202</li>
							<li><i class="icon-collect"></i>202</li>
							<li><i class="icon-comment"></i>202</li>
						</ul>
					</div>
				</div>
				<div class="topic">
					<div class="topic-body">
						<div class="mui-clearfix">
							<h1 class="mod-title-30 mui-ellipsis mui-pull-left">话题话题话题话题话题话题话题话题</h1>
							<a href="" class="mui-pull-right icon-update"></a>
						</div>
						<p class="mod-info-22">话题标题标题标题标题标题标题。标题标题标题题标题，题标题题标 题题标题题标题题标题题标题题标题题标题。题标题题标题题标题题 标</p>
						<div class="topic-body-imgs">
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
						</div>
					</div>
					<div class="topic-footer">
						<ul class="mod-title-20 mui-pull-right">
							<li><i class="icon-like"></i>202</li>
							<li><i class="icon-collect"></i>202</li>
							<li><i class="icon-comment"></i>202</li>
						</ul>
					</div>
				</div>
			</div>
			<!--E我的话题-->
		</div>
		<!--脚部-->
		<nav class="mui-bar mui-bar-tab detail-footer">
		<h1 class="phone-num mui-pull-left">136-2848-3837</h1>
		<div class="">
		</div>
			<a href="#" class="footer-btn mui-pull-right">发起话题</a>
		</nav>
		<script type="text/html" id="topic">
				<div class="topic">
					<div class="topic-body">
						<div class="mui-clearfix">
							<h1 class="mod-title-30 mui-ellipsis mui-pull-left">话题话题话题话题话题话题话题话题</h1>
							<a href="" class="mui-pull-right icon-update"></a>
						</div>
						<p class="mod-info-22">话题标题标题标题标题标题标题。标题标题标题题标题，题标题题标 题题标题题标题题标题题标题题标题题标题。题标题题标题题标题题 标</p>
						<div class="topic-body-imgs">
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
							<img src="http://placehold.it/144x144"/>
						</div>
					</div>
					<div class="topic-footer">
						<ul class="mod-title-20 mui-pull-right">
							<li><i class="icon-like"></i>202</li>
							<li><i class="icon-collect"></i>202</li>
							<li><i class="icon-comment"></i>202</li>
						</ul>
					</div>
				</div>
		</script>
		<script src="js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mod.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var str = '<div class="null-img"><img src="img/static/null.jpg"/></div>';
			mui("#topic")[0].innerHTML=str;
		</script>
	</body>

</html>